<template>
  <el-form size="small">
    <div class="l40 online-row">
      <div class="w150 online-col">出票方式</div>
      <div class="w160 online-col">&nbsp;</div>
      <div class="w200 online-col">票面价</div>
      <div class="w200 online-col">代理费率</div>
      <div class="w200 online-col">代理费</div>
      <div class="w200 online-col">采购金额</div>
      <div class="w200 online-col">
        <el-button type="primary" size="small" class="w120" @click="onPat">PAT</el-button>
      </div>
    </div>
    <div class="online-row">
      <div class="online-group-panel l40">
        <div>
        <el-form-item class="w150 online-col">
          <el-button :disabled="disabled" :loading="operator.issueTicket || issueTicket" size="small" type="warning" class="w120" @click="onBspSubmit">BSP出票</el-button>
        </el-form-item>
        <el-form-item class="w160 online-col">
          <el-select v-model="form.bspBop.etermGroup">
            <el-option v-for="item in options.etermGroup" :key="item" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        </div>
        <div>
          <el-form-item class="w150 online-col">
            <el-button :disabled="disabled" :loading="operator.issueTicket || issueTicket" size="small" type="warning" class="w120" @click="onBopSubmit">BOP出票</el-button>
          </el-form-item>
        </div>
      </div>
      <div class="online-group-panel">
        <div class="font-red">{{data.bspBop.errMsg}}</div>
        <div class="online-row-bg" v-for="(item, idx) in data.bspBop.priceList" :key="'bsp' + idx">
          <div class="w200 online-col">
            <el-radio v-model="form.bspBop.radio" :label="item">&nbsp;</el-radio>
            {{item.fare}}
          </div>
          <div class="w200 online-col">{{(item.rebates * 100) | fixed2}}%</div>
          <div class="w200 online-col">{{item.fixedFee}}</div>
          <div class="w200 online-col font-red">{{(item.fare - item.fixedFee)|fixed2}}</div>
        </div>
      </div>
    </div>
    <div class="online-row">
      <div class="online-group-panel l40">
        <div>
          <el-form-item class="w150 online-col">
            <c-confirm-button size="small"
                              confirm-msg="是否确认B2B入库？"
                              type="primary"
                              :disabled="disabled"
                              class="w120" @click="onB2bSave">B2B自动入库</c-confirm-button>
          </el-form-item>
          <div class="w160 online-col">&nbsp;</div>
        </div>
        <div>
          <el-form-item class="w150 online-col">
            <el-button :disabled="disabled" :loading="operator.issueTicket || issueTicket" size="small" type="warning" class="w120" @click="onB2bSubmit">B2B自动出票</el-button>
          </el-form-item>
        </div>
      </div>
      <div class="online-group-panel">
        <div class="font-blue" v-if="b2b.loading">正在获取B2B运价请稍等……</div>
        <div class="font-red">{{data.b2b.errMsg}}</div>
        <div v-if="!b2b.loading && !b2b.loaded">
          <el-button type="primary" size="mini" @click="loadB2bList">获取运价</el-button>
        </div>
        <div class="online-row-bg" v-for="(item, idx) in data.b2b.priceList" :key="'bsp' + idx">
          <div class="w200 online-col">
            <el-radio v-model="form.b2b.radio" :label="item">&nbsp;</el-radio>
            {{item.ticketPar}}
          </div>
          <div class="w200 online-col">{{(item.rebates * 100) | fixed2}}%</div>
          <div class="w200 online-col">{{item.fixedFee}}</div>
          <div class="w200 online-col font-red">{{(item.ticketPar - item.fixedFee)|fixed2}}</div>
        </div>
        <div>
          <el-form ref="b2bForm" :model="form.b2b" size="small" :rules="rules">
            <el-form-item class="online-col" label="B2B账号" label-width="90px" prop="b2bUsername">
              <el-input v-model="form.b2b.b2bUsername" placeholder="账号"/>
            </el-form-item>
            <el-form-item class="online-col" label=" " prop="b2bPwd" label-width="20px">
              <el-input v-model="form.b2b.b2bPwd" placeholder="密码" type="password"/>
            </el-form-item>
            <el-form-item class="online-col" label=" " prop="payAccountId" label-width="20px">
              <el-select v-model="form.b2b.payAccountId" placeholder="支付账号">
                <el-option v-for="item in options.account" :label="item.value" :value="item.key" :key="item.key"/>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <component :is="dialog.tag" :data="dialog.data" @close="dialog.tag = ''"/>
  </el-form>
</template>

<script>
import IssueSuccessDialog from './IssueSuccessDialog'

export default {
  name: 'OnlineDrawTicket',
  components: {
    IssueSuccessDialog
  },
  props: {
    disabled: Boolean,
    detail: {
      type: Object,
      default () {
        return {
          ownerAirline: '',
          airlineRecordNo: '',
          b2bAccount: '',
          b2bPwd: ''
        }
      }
    },
    issueTicket: Boolean
  },
  data () {
    return {
      dialog: {
        tag: '',
        data: {}
      },
      operator: {
        issueTicket: false
      },
      options: {
        etermGroup: [],
        account: []
      },
      data: {
        bspBop: {priceList: [], errMsg: ''},
        b2b: {priceList: [], errMsg: ''}
      },
      b2b: {
        loading: false,
        loaded: false
      },
      form: {
        bspBop: {
          etermGroup: 'CSX510',
          radio: null
        },
        b2b: {
          radio: null,
          b2bUsername: this.detail.b2bAccount,
          b2bPwd: this.detail.b2bPwd,
          payAccountId: ''
        }
      },
      rules: {
        b2bUsername: this.$checkRules.b2b.b2bUsername,
        b2bPwd: this.$checkRules.b2b.b2bPwd,
        payAccountId: this.$checkRules.b2b.payAccountId
      }
    }
  },
  created () {
    this.$service.eterm.queryAllGroupList().then(res => {
      this.options.etermGroup = res.data
    })

    this.$service.options.getB2bPayAccount().then(res => {
      this.options.account = res.data
    })

    this.loadB2bList()
  },
  methods: {
    onPat () {
      this.loadBspBopList()
    },
    loadB2bList () {
      this.b2b.loaded = false
      this.b2b.loading = true
      this.$service.order.queryB2BPrice({
        airline: this.detail.ownerAirline,
        airlineRecordNo: this.detail.airlineRecordNo
      }).then(res => {
        this.data.b2b.errMsg = ''
        this.data.b2b = res.data
        if (res.data.priceList.length > 0) {
          this.form.b2b.radio = res.data.priceList[0]
        }
        this.b2b.loaded = true
      }).catch(res => {
        this.data.b2b.priceList = []
        this.data.b2b.errMsg = res.msg
      }).finally(() => {
        this.b2b.loading = false
      })
    },
    loadBspBopList () {
      this.$service.order.queryBSPPatInfo({
        localOrderId: this.detail.localOrderId,
        recordNo: this.detail.recordNo,
        etermGroup: this.form.bspBop.etermGroup
      }).then(res => {
        this.data.bspBop.errMsg = ''
        this.data.bspBop = res.data
        if (res.data.priceList.length > 0) {
          this.form.bspBop.radio = res.data.priceList[0]
        }
      }).catch(res => {
        this.data.bspBop.priceList = []
        this.data.bspBop.errMsg = res.msg
      })
    },
    onBspSubmit () {
      this.bspBopSubmit('BSP')
    },
    onBopSubmit () {
      this.bspBopSubmit('BOP')
    },
    bspBopSubmit (type) {
      if (!this.form.bspBop.radio) {
        this.$alert('请先选择票价', '提示')
        return
      }
      this.$confirm('是否确认使用' + type + '出票？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.operator.issueTicket = true
        this.$service.order.etermIssue({
          issueChannel: type,
          localOrderId: this.detail.localOrderId,
          printPrice: this.form.bspBop.radio.fare,
          recordNo: this.detail.recordNo,
          etermGroup: this.form.bspBop.etermGroup
        }).then(res => {
          this.dialog.tag = 'IssueSuccessDialog'
          this.dialog.data = res.data
          this.$emit('submit')
        }).finally(() => {
          this.operator.issueTicket = false
          this.$emit('issueTicket')
        })
      })
    },
    onB2bSave (done) {
      this.$service.order.b2bInput({
        localOrderId: this.detail.localOrderId,
        ticketpar: this.form.b2b.radio.ticketPar,
        tax: this.form.b2b.radio.tax,
        payPrice: this.form.b2b.radio.payPrice,
        rebates: this.form.b2b.radio.rebates,
        fixedFee: this.form.b2b.radio.fixedFee,
        aircode: this.detail.ownerAirline,
        airlineRecordNo: this.detail.airlineRecordNo,
        b2bUsername: this.form.b2b.b2bUsername,
        b2bPwd: this.form.b2b.b2bPwd,
        officeNo: this.detail.officeNo,
        payAccountId: this.form.b2b.payAccountId
      }).then(() => {
        this.$emit('submit')
      }).finally(done)
    },
    onB2bSubmit () {
      this.$refs['b2bForm'].validate(valid => {
        if (valid) {
          this.$confirm('是否确认使用B2B出票？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.operator.issueTicket = true
            this.$service.order.b2bIssue({
              localOrderId: this.detail.localOrderId,
              printPrice: this.form.b2b.radio.ticketPar,
              tax: this.form.b2b.radio.tax,
              payPrice: this.form.b2b.radio.payPrice,
              rebates: this.form.b2b.radio.rebates,
              fixedFee: this.form.b2b.radio.fixedFee,
              aircode: this.detail.ownerAirline,
              airlineRecordNo: this.detail.airlineRecordNo,
              b2bUsername: this.form.b2b.b2bUsername,
              b2bPwd: this.form.b2b.b2bPwd,
              officeNo: this.detail.officeNo,
              payAccountId: this.form.b2b.payAccountId
            }).then(res => {
              this.dialog.tag = 'IssueSuccessDialog'
              this.dialog.data = res.data
              this.$emit('submit')
            }).finally(() => {
              this.operator.issueTicket = false
              this.$emit('issueTicket')
            })
          })
        }
      })
    }
  }
}
</script>

<style>
.online-row:first-child {
  border-top: 1px solid #aee7fb;
}

.online-row {
  box-sizing: border-box;
  border-left: 1px solid #aee7fb;
  border-right: 1px solid #aee7fb;
  border-bottom: 1px solid #aee7fb;
}

.online-col {
  box-sizing: border-box;
  padding: 0 10px;
  display: inline-block;
}

.online-group-panel {
  display: inline-block;
  vertical-align: top;
}

.online-row-bg {
  padding: 5px 0;
  margin: 5px 0;
  background-color: #e3f5fb;
}
</style>
